<template>
    <el-menu :default-openeds="['1', '3','5','6']"style="min-height: 100% ; overflow-x: hidden"
             background-color="rgb(48 , 65 ,86)"
             text-color="#fff"
             active-text-color="#ffd04b"
             :collapse-transition="false"
             :collapse="isCollapse"
             router
             @select = "handleSelect"

    >
        <div style="height: 60px; line-height: 60px ;text-align: center">
            <img src = "../assets/4.jpg" alt = "" style="width: 20px;position:relative;top: 3px;margin-right: 5px">
            <b style="color: white" v-show="logoTextShow">书吧后台管理系统</b>
        </div>

        <div v-for="item in menus" :key="item.id">
            <div v-if="item.path">
                <el-menu-item :index="item.path">
                    <i :class="item.icon"></i>
                    <span slot="title">{{ item.name }}</span>
                </el-menu-item>
            </div>
            <div v-else>
                <el-submenu :index="item.id + ''">
                    <template slot="title">
                        <i :class="item.icon"></i>
                        <span slot="title">{{ item.name }}</span>
                    </template>
                    <div  v-for="subItem in item.children" :key="subItem.id">
                        <el-menu-item :index="subItem.path">
                            <i :class="subItem.icon"></i>
                            <span slot="title">{{ subItem.name }}</span>
                        </el-menu-item>
                    </div>
                </el-submenu>
            </div>
        </div>




   <!--    <el-menu-item index="/home">
                <template slot="title">
                    <i class="el-icon-house"></i>
                    <span slot="title">主页</span>
                </template>
            </el-menu-item>
        <el-submenu index="1">
            <template slot="title"><i class="el-icon-menu"></i>
                <span slot="title">图书管理</span>
            </template>
            <el-menu-item index="/ManageEBook">
                <i class="el-icon-s-platform"></i>
                <span slot="title">电子图书管理</span>
            </el-menu-item>
            <el-menu-item index="/ManageBook">
                <i class="el-icon-reading"></i>
                <span slot="title">实体图书管理</span>
            </el-menu-item>
        </el-submenu>
        <el-submenu index="2">
            <template slot="title"><i class="el-icon-s-management"></i>
                <span slot="title">内务管理</span>
            </template>
            <el-menu-item index="/ManageEmployee">
                <i class="el-icon-s-custom"></i>
                <span slot="title">员工管理</span>
            </el-menu-item>
            <el-menu-item index="/ManageMember">
                <template slot="title">
                    <i class="el-icon-house"></i>
                    <span slot="title">会员管理</span>
                </template>
            </el-menu-item>
            <el-menu-item index="/menu">
                <template slot="title">
                    <i class="el-icon-star-on"></i>
                    <span slot="title">菜单管理</span>
                </template>
            </el-menu-item>
            <el-menu-item index="/File">
                <template slot="title">
                    <i class="el-icon-document"></i>
                    <span slot="title">文件管理</span>
                </template>
            </el-menu-item>
            <el-menu-item index="/ManageFinance">
                <i class="el-icon-coin"></i>
                <span slot="title">财务管理</span>
            </el-menu-item>
        </el-submenu>
        <el-menu-item index="/AssignSeats">
            <template slot="title">
                <i class="el-icon-s-help"></i>
                <span slot="title">座位分配</span>
            </template>
        </el-menu-item>
        <el-submenu index="4">
            <template slot="title"><i class="el-icon-menu"></i>
                <span slot="title">订单管理</span>
            </template>
            <el-menu-item index="/userorder">
                <i class="el-icon-s-platform"></i>
                <span slot="title">用户订单管理</span>
            </el-menu-item>
            <el-menu-item index="/storeorder">
                <i class="el-icon-reading"></i>
                <span slot="title">进货订单管理</span>
            </el-menu-item>
        </el-submenu>-->



    </el-menu>
</template>

<script>
    export default {
        name: "Asid",
        props:{

            isCollapse : Boolean,
            logoTextShow:Boolean
        },

        data(){
            return{
                bgImg: {
                    backgroundImage: "url('http://localhost:9099/file/b1e15b91a1c9423f8ea42264cf61700d.jpg')",
                    backgroundRepeat: "no-repeat",
                    backgroundSize: 'cover',
                    backgroundPosition: 'center top',
                },

                collapseBtnClass:'el-icon-s-fold',
                menus: localStorage.getItem("menus")?JSON.parse(localStorage.getItem("menus")):[]

            }
        },
        methods:{

            handleSelect(){
                this.$route.fullPath.split()
            }

        }

    }


</script>

<style scoped>

    .el-menu--collapse span {
        visibility: hidden;
    }
</style>